<template>
  <div style="margin: 10px auto">
    <div style="padding: 20px;">
      <h2 style="font-size: 20px;cursor: pointer" @click="tailoring">裁剪</h2>
    </div>

    <!--继续写页面的其他内容 pop_alert可封装成组件使用-->
    <p>截图展示的图片</p>
    <img style="border: 5px solid #000000" :src="uploadImg" alt="" />

    <div class="pop_alert" v-if="show">
      <vueCropper
          @mouseenter.native="enter"
          @mouseleave.native="leave"
          ref="cropper"
          :img="uploadImg"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :fixedBox="option.fixedBox"
          style="background-image: none"
      ></vueCropper>
      <div class="btn_box">
        <div @click="save">确认截图</div>
        <div @click="close">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
  data() {
    return {
      option: {
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: false, // 是否默认生成截图框
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        fixedNumber: [7, 5], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMove: false, //时候可以移动原图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      uploadImg: '',
      show: false,
    }
  },
  methods: {
    tailoring() {
      //裁剪
      this.$nextTick(() => {
        html2canvas(document.body, {useCORS: true,}).then(canvas => {
          let dataURL = canvas.toDataURL('image/png')
          console.log(dataURL, 'dataURL')
          this.uploadImg = dataURL
          this.show = true
        })
      })
    },
    enter() {
      if (this.uploadImg == '') {
        return
      }
      this.$refs.cropper.startCrop() //开始裁剪
    },
    leave() {
      this.$refs.cropper.stopCrop() //停止裁剪
    },
    save() {
      //确认截图
      this.$refs.cropper.getCropData(data => {
        //获取截图的base64格式数据
        console.log(data)
        this.show = false
      })
      // this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据
      //   this.cutImg = data;
      // });
    },
    close() {
      //取消
      this.show = false
    },
  },
}
</script>
<style>
.pop_alert {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px dashed red;
  background-color: #000000;
}
.btn_box {
  position: absolute;
  top: 0;
  color: red;
  right: 0;
  font-size: 30px;
  display: flex;
  align-items: center;
  z-index: 6666;
}
</style>
